import { useRouteError } from 'react-router-dom'

import NotFoundSvg from '@assets/images/not_found.svg'
const ErrorInfo = {
  title: 'Module',
  content: `Not Found`,
}
export function ErrorPage({ children, ...props }: { children?: React.ReactNode; title?: string; content?: string }) {
  const error: any = useRouteError()
  return (
    <div className="flex h-full w-full flex-col items-center justify-center py-20">
      <div className="error-img" style={{ maxWidth: '300px' }}>
        <img src={NotFoundSvg} className="select-none" width="100%" />
      </div>
      <h1 className="text-20">{ErrorInfo.title ?? <>Error</>}</h1>
      {children ?? (
        <>
          <p>{ErrorInfo.content ?? <>抱歉，发生了意外的错误</>}</p>
          {ErrorInfo.content && (
            <p>
              <i>{error?.statusText || error?.message}</i>
            </p>
          )}
        </>
      )}
    </div>
  )
}
